{{!
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
}}

<div class="host-component-popup-wrap">

{{#if view.parentView.isLoaded}}
{{!-- SERVICES --}}

  <div {{bindAttr class="view.parentView.isServiceListHidden:hidden :task-list-main-warp"}}>
    <div class="task-top-wrap">
      <div class="operation-name-top">{{t common.operations}}</div>
      <div class="start-time-top">{{t common.startTime}}</div>
      <div class="duration-top">{{t common.duration}}</div>
      <div class="select-wrap">
        {{t common.show}}:
        {{view Ember.Select
        contentBinding="view.categories"
        optionValuePath="content.value"
        optionLabelPath="content.label"
        selectionBinding="view.serviceCategory"
        }}
      </div>
    </div>
    <div id="service-info">
      {{#if view.isServiceEmptyList}}
        <div class="log-list-wrap">{{t hostPopup.noServicesToShow}}</div>
      {{else}}
        {{#each servicesInfo in view.services}}
          <div {{action gotoHosts servicesInfo}} {{bindAttr class="servicesInfo.isVisible::hidden :log-list-wrap"}}>
            <div class="task-list-line-cursor">
              <div class="operation-name-icon-wrap">
                {{view statusIcon servicesInfoBinding="servicesInfo"}}
                <a href="#">
                  {{servicesInfo.name}}
                </a>
                {{#if servicesInfo.isAbortable}}
                  {{view abortIcon servicesInfoBinding="servicesInfo"}}
                {{/if}}
              </div>
              <div class="time-summary start-time-text">{{servicesInfo.startTime}}</div>
              <div class="time-summary duration-text">{{servicesInfo.duration}}</div>
              <div class="progress-bar span2">
                <div {{bindAttr class="servicesInfo.isInProgress:progress-striped servicesInfo.isInProgress:active servicesInfo.barColor :progress"}}>
                  <div class="bar" {{bindAttr style="servicesInfo.barWidth"}}></div>
                </div>
              </div>
              <div class="host-progress-num">{{servicesInfo.progress}}%</div>
              <div class="show-details"><i class="icon-caret-right"></i></div>
            </div>
          </div>
        {{/each}}
      {{/if}}
      {{#if view.isShowMore}}
        <div class="show-more" {{action requestMoreOperations}}><a href="#">{{t hostPopup.serviceInfo.showMore}}</a>
        </div>
      {{/if}}
    </div>
  </div>


  {{!-- HOSTS ---}}

  <div {{bindAttr class="view.parentView.isHostListHidden:hidden :task-list-main-warp"}}>
    <div class="task-top-wrap">
      {{#if controller.isBackgroundOperations}}
        <a class="task-detail-back-to-hosts" href="javascript:void(null)" {{action backToServiceList}} >
          <i class="icon-arrow-left"></i>&nbsp;{{t common.operations}}
        </a>
      {{/if}}
      <span class="task-detail-log-rolename">{{t common.hosts}}</span>

      <div class="select-wrap">
        {{t common.show}}:
        {{view Ember.Select
        contentBinding="view.categories"
        optionValuePath="content.value"
        optionLabelPath="content.label"
        selectionBinding="view.hostCategory"
        }}
      </div>
    </div>
    {{#if view.isRequestSchedule}}
      {{#if view.sourceRequestScheduleRunning}}
        <div class="alert alert-info request-schedule-abort">
          {{t hostPopup.bgop.sourceRequestSchedule.running}}
          <button type="button" class="btn btn-warning pull-right"
            {{action doAbortRequestSchedule view.sourceRequestScheduleId target="view"}}>
            {{view.requestScheduleAbortLabel}}
          </button>
        </div>
      {{/if}}
      {{#if view.sourceRequestScheduleAborted}}
        <div class="alert alert-info request-schedule-abort">
          {{t hostPopup.bgop.sourceRequestSchedule.aborted}}
        </div>
      {{/if}}
    {{/if}}
    {{#if view.isLevelLoaded}}
      <div id="host-info" {{bindAttr class="view.isRequestSchedule:scheduled"}}>
        {{#if view.isHostEmptyList}}
          <div class="log-list-wrap">{{t hostPopup.noHostsToShow}}</div>
        {{else}}
          {{#each hostInfo in view.pageContent}}
            <div {{action gotoTasks hostInfo}} {{bindAttr class="hostInfo.isVisible::hidden :log-list-wrap"}}>
              <div class="task-list-line-cursor">
                <div class="host-name-icon-wrap">
                  {{view statusIcon servicesInfoBinding="hostInfo"}}
                  <a href="#">
                    {{hostInfo.displayName}}
                  </a>
                </div>
                <div class="progress-bar span2">
                  <div {{bindAttr class="hostInfo.isInProgress:progress-striped :active hostInfo.barColor :progress"}}>
                    <div class="bar" {{bindAttr style="hostInfo.barWidth"}}></div>
                  </div>
                </div>
                <div class="host-progress-num">{{hostInfo.progress}}%</div>
                <div class="show-details"><i class="icon-caret-right"></i></div>
              </div>
            </div>
          {{/each}}
        {{/if}}
      </div>
    {{else}}
      {{view App.SpinnerView}}
    {{/if}}
  </div>


  {{!-- TASKS ---}}

  <div {{bindAttr class="view.parentView.isTaskListHidden:hidden :task-list-main-warp"}}>
    <div class="task-top-wrap">
      <a class="task-detail-back-to-hosts" href="javascript:void(null)" {{action backToHostList}} ><i
              class="icon-arrow-left"></i>&nbsp;{{t common.hosts}}</a>

      <div class="task-name-top task-detail-log-rolename">{{t common.tasks}}</div>
      <div class="select-wrap tasks-list-select">
        {{t common.show}}:
        {{view Ember.Select
        contentBinding="view.categories"
        optionValuePath="content.value"
        optionLabelPath="content.label"
        selectionBinding="view.taskCategory"
        }}
      </div>
    </div>
    <div id="host-log">
      {{#if view.hostInfoLoaded}}
        {{#if view.isTasksEmptyList}}
          <div class="log-list-wrap">{{t hostPopup.noTasksToShow}}</div>
        {{else}}
          {{#each taskInfo in view.tasks}}
            <div {{action toggleTaskLog taskInfo}} {{bindAttr class="taskInfo.isVisible::hidden :log-list-wrap"}}>
              <div class="task-list-line-cursor">
                <div class="operation-name-icon-wrap">
                  {{view statusIcon servicesInfoBinding="taskInfo"}}
                  <a href="#">
                    {{taskInfo.commandDetail}}
                  </a>
                </div>
                <div class="show-details"><i class="icon-caret-right"></i></div>
              </div>
            </div>
          {{/each}}
        {{/if}}
      {{else}}
        {{view App.SpinnerView}}
      {{/if}}
    </div>
  </div>


  <!-- TASK DETAILS --->

  <div {{bindAttr class="view.parentView.isLogWrapHidden:hidden :task-detail-info view.hostComponentLogsExists:task-detail-info-tabbed"}}>
    <div class="task-top-wrap">
      <a class="task-detail-back" href="javascript:void(null)" {{action backToTaskList}} ><i
                                                                                              class="icon-arrow-left"></i>&nbsp;{{t common.tasks}}</a>

      <div {{bindAttr class="view.hostComponentLogsExists:task-detail-log-nav-actions"}}>
        <i {{bindAttr class="view.openedTask.status :task-detail-status-ico view.openedTask.icon"}}></i>

        <div class="task-detail-ico-wrap">
          <a {{translateAttr title="common.fullLogPopup.clickToCopy"}} {{action "textTrigger" taskInfo target="view"}} class="task-detail-copy"><i
                                                                                                                                                    class="icon-copy"></i> {{t common.copy}}</a>
          <a {{translateAttr title="common.openNewWindow"}} {{action openTaskLogInDialog}} class="task-detail-open-dialog"><i
                                                                                                                               class="icon-external-link"></i> {{t common.open}}</a>
          {{#if App.supports.logSearch}}
            {{#if view.isLogSearchInstalled}}
              {{#isAuthorized "SERVICE.VIEW_OPERATIONAL_LOGS"}}
                <a {{action navigateToHostLogs target="view"}} {{bindAttr class="view.isLogsLinkVisible::hidden"}} href="#">
                  <i class="icon-file"></i> {{t common.host}} {{t common.logs}}
                </a>
              {{/isAuthorized}}
            {{/if}}
          {{/if}}
        </div>
        <span class="task-detail-log-rolename">{{view.openedTask.commandDetail}}</span>
      </div>
      <ul {{bindAttr class="view.hostComponentLogsExists::hide :nav :nav-tabs :task-detail-nav"}}>
        <li {{bindAttr class="view.isLevelLoaded:active"}}>
          <a href="#" data-target="#task-log-tab" data-toggle="tab" {{action setActiveTaskLogTab target="view"}}>{{t app.name}} stdout/stderr</a>
        </li>
        {{#each hostLog in view.hostComponentLogs}}
          <li>
            <a href="#" {{action setActiveLogTab hostLog target="view"}} {{bindAttr data-target="hostLog.tabClassNameSelector"}} data-toggle="tab">{{hostLog.displayedFileName}}</a>
          </li>
        {{/each}}
      </ul>
    </div>
    {{#if view.isLevelLoaded}}
      <div class="task-detail-log-info">
        <div class="content-area">
          <div class="tab-content">
            <div class="task-detail-log-clipboard-wrap"></div>
            <div id="task-log-tab" class="tab-pane active">
              <div {{bindAttr class=":task-detail-log-maintext view.isClipBoardActive:hidden"}}>
                {{#if view.openedTask.isRebalanceHDFSTask }}
                  <h5>{{t services.hdfs.rebalance.title}}</h5>

                  <div class="progresspopup-rebalancehdfs">
                    <div {{bindAttr class=":progress view.openedTask.isInProgress:progress-striped view.openedTask.barColor :active"}}>
                      <div class="bar" {{bindAttr style="view.openedTask.completionProgressStyle"}}></div>
                    </div>
                  </div>
                  <div class="clearfix">
                    <div class="pull-left">
                      {{view.openedTask.dataMoved}} moved /
                      {{view.openedTask.dataLeft}} left /
                      {{view.openedTask.dataBeingMoved}} being processed
                    </div>
                    {{#if view.openedTask.isNotComplete}}
                      <button class="btn btn-danger pull-right" {{action stopRebalanceHDFS}}>{{t common.cancel}}</button>
                    {{/if}}
                  </div>
                  <hr>
                {{/if}}
                <p>{{t common.stderr}}: &nbsp; <span class="muted">{{view.openedTask.errorLog}} </span></p>
                <pre class="stderr">{{view.openedTask.stderr}}</pre>
                <p>{{t common.stdout}}: &nbsp; <span class="muted"> {{view.openedTask.outputLog}} </span></p>
                <pre class="stdout">{{view.openedTask.stdout}}</pre>
              </div>
            </div>
            {{#each hostLog in view.hostComponentLogs}}
              <div {{bindAttr class=":tab-pane :log-component-tab hostLog.tabClassName"}}>
                <p {{bindAttr class="view.isClipBoardActive:hidden"}}>
                  <span class="text-bold">{{t common.file}}: &nbsp; </span>
                  <span class="text-bold muted">{{hostLog.fileName}}</span>
                  {{#view App.LogSearchUILinkView linkQueryParamsBinding="hostLog.linkTail" tagName="span"}}
                    <a {{bindAttr href="view.formatedLink" class=":pull-right view.isLodaded::disabled"}} target="_blank">
                      <i class="icon-external-link"></i>
                      {{t popup.logTail.openInLogSearch}}</a>
                  {{/view}}
                </p>
                <div {{bindAttr class="view.isClipBoardActive:hidden"}}>
                  {{view view.logTailView contentBinding="hostLog"}}
                </div>
              </div>
            {{/each}}
          </div>
        </div>
      </div>
    {{else}}
      {{view App.SpinnerView}}
    {{/if}}
  </div>
{{else}}
  {{view App.SpinnerView}}
{{/if}}
</div>
{{#if view.isPaginate}}
  <div class="page-bar pull-right no-borders mtm">
    <div class="items-on-page">
      <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
    </div>
    <div class="info">{{view.paginationInfo}}</div>
    <div class="paging_two_button">
      {{view view.paginationFirst}}
      {{view view.paginationLeft}}
      {{view view.paginationRight}}
      {{view view.paginationLast}}
    </div>
  </div>
{{/if}}
